<template>
  <div class="shop-container">
    <Container>
      <template v-slot:swiper>
        <div style="width: 1226px; height: 460px">
          <Swiper
            v-if="homeStore.swiper"
            :type="'shop'"
            :swiperList="homeStore.swiper"></Swiper>
        </div>
      </template>
      <template v-slot:hero>
        <Channel></Channel>
        <Promo
          :promoList="homeStore.promo"
          v-if="homeStore.promo"></Promo>
      </template>
    </Container>
  </div>
  <div class="shop-main-outer">
    <div class="shop-main">
      <Banner
        :banner="homeStore.banner[0]"
        v-if="homeStore.banner"></Banner>
      <Brick
        :brickList="homeStore.brick"
        v-if="homeStore.brick"></Brick>
    </div>
  </div>
</template>

<script setup lang="ts">
import Container from '@/components/container/index.vue'
import Swiper from '@/components/swiper/index.vue'
import Channel from '@/components/channel/index.vue'
import Promo from '@/components/promo/index.vue'
import Banner from '@/components/banner/index.vue'
import Brick from '@/components/brick/index.vue'
import useStore from '@/store'
const { homeStore } = useStore()
homeStore.getSwiper()
homeStore.getHome()
homeStore.getPromo()
homeStore.getBanner()
</script>

<style lang="less" scoped>
.shop-container {
  margin: 0 auto;
  width: 1226px;
  min-width: 1226px;
}
.shop-main-outer {
  background-color: #f5f5f5;
  width: 100%;
}
.shop-main {
  margin: 0 auto;
  padding: 5px 0;
  width: 1226px;
  min-width: 1226px;
}
</style>
